import { View, Text, Input, Textarea, Picker } from "@tarojs/components";
import { Component, ReactNode, memo } from "react";
import { AtList, AtListItem, AtNavBar, AtImagePicker, AtButton } from "taro-ui";
import Taro from "@tarojs/taro";
import { isEmpty, uploadImgConvertUrl, debounce } from "../../utils/kit";
import "./index.scss";
import Req, { BASE_URL } from "../../utils/request";

export default class FulfillForm extends Component {
  state = {
    deadline: "",
    ratio: "",
    memo: "",
    files: [],

    futuresProjectId: "",
    fid: "",
  };
  onChange = (files) => {
    this.setState({
      files,
    });
  };
  componentDidShow() {
    const { router } = Taro.getCurrentInstance();
    const { fid, futuresProjectId }: any = router?.params;
    this.setState({
      futuresProjectId: futuresProjectId,
      fid: fid,
    });
    if (fid) {
      Req.get("/project/fulfil/" + fid).then((r) => {
        let _files = [];
        if (r.data.img) {
          _files = r.data.img.split(",").map((e) => {
            return {
              url: BASE_URL + e,
            };
          });
        }
        this.setState({
          memo: r.data.memo,
          ratio: r.data.ratio,
          deadline: r.data.deadline,
          files: _files,
        });
      });
    }
  }

  render(): ReactNode {
    const { deadline, ratio, memo, files, futuresProjectId, fid } = this.state;

    return (
      <View className="fulfill-form-container">
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            Taro.navigateBack();
          }}
        >
          <View>{"进度明细"}</View>
        </AtNavBar>
        <AtList>
          <Picker
            mode="date"
            value={deadline}
            onChange={(e) => {
              this.setState({
                deadline: e.detail.value,
              });
            }}
            fields="day"
          >
            <AtListItem
              className="form-list-item form-label-required"
              title={"截止日期"}
              arrow="down"
              note={
                <View>
                  <Text>{isEmpty(deadline) ? "请选择截止日期" : deadline}</Text>
                </View>
              }
            />
          </Picker>

          <AtListItem
            title="进度(%)"
            className="form-list-item no-active-effect-item form-label-required"
            note={
              <View>
                <Input
                  value={ratio}
                  onInput={(e) => {
                    this.setState({
                      ratio: e.detail.value,
                    });
                  }}
                  placeholder="请输入进度值"
                />
              </View>
            }
          />
          <AtListItem
            title="进度反馈"
            className="form-list-item no-active-effect-item remark-form-item no-arrow-space"
            note={
              <View>
                <Textarea
                  value={memo}
                  onInput={(e) => {
                    this.setState({
                      memo: e.detail.value,
                    });
                  }}
                  className="remark-textarea"
                  placeholder="请输入进度反馈"
                />
              </View>
            }
            extraText={
              <View className="img-picker">
                <AtImagePicker
                  length={1}
                  files={this.state.files}
                  onChange={this.onChange}
                />
              </View>
            }
          />
        </AtList>
        <View className="bottom-btn ff-flex-box">
          {!isEmpty(fid) && (
            <AtButton
              onClick={() => {
                Taro.showModal({
                  title: "提示",
                  content: "确认删除？",
                  success: (res) => {
                    if (res.confirm) {
                      Req.post("/project/fulfil/" + fid).then((r) => {
                        if (r.code === 200) {
                          Taro.eventCenter.trigger("refreshData", {
                            force: true,
                            futuresProjectId: futuresProjectId,
                          });
                          Taro.navigateBack();
                        }
                      });
                    }
                  },
                });
              }}
              className="info-btn-color"
              circle
              type="primary"
            >
              删除
            </AtButton>
          )}

          <AtButton
            className="primary-btn-color"
            onClick={() => {
              let _url = "/project/fulfil/add";
              if (isEmpty(deadline)) {
                Taro.showToast({
                  title: "截止日期不能为空！",
                  icon: "none",
                  duration: 2000,
                });
                return false;
              }
              if(isEmpty(ratio)){
                Taro.showToast({
                  title: "进度不能为空！",
                  icon: "none",
                  duration: 2000,
                });
                return false;
              }

              uploadImgConvertUrl(files).then((results) => {
                let img = results
                  .map((e: any) => {
                    if (e?.data) {
                      return JSON.parse(e.data)?.fileName;
                    } else {
                      return e.fileName;
                    }
                  })
                  .join(",");

                let paramsObj = {
                  futuresProjectId,
                  img,
                  memo,
                  ratio,
                  deadline,
                };
                if (fid) {
                  _url = "/project/fulfil/edit";
                  paramsObj["id"] = fid;
                }
                Req.post(_url, { ...paramsObj })
                  .then((r) => {
                    if (r.code === 200) {
                      Taro.eventCenter.trigger("refreshData", {
                        force: true,
                        futuresProjectId: futuresProjectId,
                      });
                      Taro.navigateBack();
                    }
                  })
                  .catch((e) => {});
              });
            }}
            circle
            type="primary"
          >
            提交
          </AtButton>
        </View>
      </View>
    );
  }
}
